<template>
	<div class="system-iotDeviceGroup-add">
		<!-- 添加或修改设备组对话框 -->
		<el-dialog v-model="isShowDialog" width="900px"  :destroy-on-close="true">
			<template #header>
				<div
					>
					账户配置详情</div>
			</template>
			<el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
				<el-form-item label="配置code" prop="code">
					<el-select v-model="formData.code" clearable class="w150"  :disabled="true"  @change="changeCode"
						placeholder="请选择配置code">
						<el-option v-for="dict in configUserTypeData" :key="dict.apiCode" :label="dict.apiName"
							:value="dict.apiCode" />
					</el-select>
				</el-form-item>
				<el-form-item label="配置名称" prop="name" class="w180">
					<el-input v-model="formData.name" :disabled="true" placeholder="请输入配置名称" />
				</el-form-item>
				<el-form-item label="分组">
					<el-select v-model="formData.group" :disabled="true" multiple clearable>
						<el-option v-for="item in configGroupData" :key="item.code" :label="item.name"
							:value="item.code" />
					</el-select>
				</el-form-item>
				<el-form-item label="权限" class="w120">
					<div class="w120 aic mb5" v-for="(item, index) in auths" :key="index">
						<div class="mr10">
							<el-input v-model="formData.auth[index]" :disabled="true" placeholder="请输入权限值" />
						</div>
					</div>
				</el-form-item>
				<el-form-item label="配置状态" prop="status">
					<el-radio-group v-model="formData.status" :disabled="true">
						<el-radio :label="true">开启</el-radio>
						<el-radio :label="false">关闭</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="配置项目">
					<el-input v-if="valuesList.length == 0" :disabled="true" placeholder="请输入配置项目" />
					<div v-else class="w200">
						<div v-for="item in valuesList" class="aic mb5" :key="item.code+item.value">
							<div class="w80">{{ item.name }}({{ item.code }})</div>
							<div class="aic flex-1">
								<div class="wh20 centerV">
									<div v-if="item.must" style="color: red;">*</div>
								</div>
								<el-input v-model="item.value" :disabled="true" :placeholder="item.valueDesc" />
							</div>
						</div>
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { reactive, toRefs, defineComponent, ref, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance, UploadProps } from 'element-plus';
import { getConfigUserConfigitemApi,detailsConfigUserApi } from '@/api/thirdManage/apiAccount'
export default defineComponent({
	name: 'apiAccountDetail',
	components: {},
	props: {
		configUserTypeData: {
			type: Array,
			default: () => []
		},
	},
	setup(props, { emit }) {
		const formRef = ref<HTMLElement | null>(null);
		const menuRef = ref();
		const state = reactive({
			loading: false,
			isShowDialog: false,
			formData: {
				id: '',
				name: '',
				code: '',
				auth: [],
				group: [],
				status: true,
				values: {},
			},
			auths: [''],
			valuesList: [],
			configGroupData: [],
			// 表单校验
			rules: {
			},
		});
		// 打开弹窗
		const openDialog = (row) => {
			resetForm();
			detailsConfigUserApi({ id: row.id }).then((res: any) => {
				if (res.data) {
					const { id, name, api, status, group, auth, items } = res.data
					state.formData.id = id
					state.formData.name = name
					state.formData.code = api.apiCode
					state.formData.status = status
					state.formData.group = group.map(item => item.code)
					if(auth.length>0){
						state.auths = auth
					state.formData.auth = auth
					}
					
					state.valuesList = res.data.items
					console.log(state.valuesList);
					
				}
			})
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		
		
		const resetForm = () => {
			state.formData = {
				id: '',
				name: '',
				code: '',
				auth: [],
				group: [],
				status: true,
				values: {},
			};
			state.configGroupData = []
			state.auths = ['']
			state.valuesList = []
		};
		return {
			menuRef,
			formRef,
			openDialog,
			closeDialog,
			onCancel,
			resetForm,
			...toRefs(state),
		};
	},
});
</script>
<style scoped></style>
